<!doctype html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>任务新增</title>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*" />
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="stylesheet" th:href="@{/static/css/font.css}">
    <link rel="stylesheet" th:href="@{/static/css/xadmin.css}">
    <!-- <link rel="stylesheet" href="./css/theme5.css"> -->
    <script th:src="@{/static/layui/layui.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/static/js/common.js}" charset="UTF-8" ></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script th:src="@{/static/js/html5.min.js}" charset="UTF-8" src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script th:src="@{/static/js/respond.min.js}" charset="UTF-8" src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>日志明细</legend>
</fieldset>
<div class="layui-col-md12">
    <div class="layui-card">
        <div class="layui-card-header">日志明细
        </div>
        <div class="layui-card-body ">
            <table class="layui-hide" id="test" lay-filter="test" ></table>
        </div>
    </div>
</div>

</body>
<script type="text/html" id="toolbarDemo">
        <div class="layui-input-inline layui-show-xs-block">
        <input class="layui-input test-item" placeholder="开始日" id="start"></div>
        <div class="layui-input-inline layui-show-xs-block">
        <input class="layui-input test-item" placeholder="截止日" id="end"></div>
        <div class="layui-input-inline layui-show-xs-block">
            <select name="" id="state" lay-verify="required" >
                <option value="" ></option>
                <option value="1" >正常</option>
                <option value="2" >无数据</option>
                <option value="3" >异常</option></select>
        </div>
        <div class="layui-input-inline layui-show-xs-block">
            <input type="text" name="" id="performBatch" placeholder="执行批次" autocomplete="off" class="layui-input"></div>
        <div class="layui-input-inline layui-show-xs-block">
            <button class="layui-btn" lay-filter="sreach" lay-event="sreach" >
                <i class="layui-icon">&#xe615;</i></button>
        </div>
</script>
<script th:inline="javascript">
    var ctx = [[@{/}]]
    var type = /*[[${type}]]*/    //获取model中的值
    var performBatch = /*[[${performBatch}]]*/    //获取model中的值
</script>
<script th:inline="none">


    layui.use(['table','laydate','form'],  function(){
        var table = layui.table
            ,$ = layui.jquery
        ,laydate = layui.laydate; //获得laydate模块

        // lay('.test-item').each(function(){
        //     laydate.render({
        //         elem: this
        //         ,format:'yyyy-MM-dd HH:mm:ss'
        //         ,type:'datetime'
        //         ,trigger: 'click'
        //     });
        // });

        //执行一个laydate实例
        laydate.render({
            elem: '#start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#end' //指定元素
        });
        //第一个实例
        table.render({
            elem: '#test'
            // ,height: 'full-20'
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                ,layEvent: 'LAYTABLE_TIPS'
                ,icon: 'layui-icon-tips'
            }]
            ,url: ctx + 'LogParticulars?type=' + type +"&performBatch="+performBatch  //数据接口
            ,loading: true
            ,page: true //开启分页
            ,response: {
                statusCode: 200 //规定成功的状态码，默认：0
                ,countName: 'total' //规定数据总数的字段名称，默认：count
            },request: {
                limitName: 'rows' //每页数据量的参数名，默认：limit
            }
            ,cols: [[ //表头
                {field: 'id', title: 'ID', sort: true, hide : true}
                ,{field: 'performBatch', title: '批次号'}
                ,{field: 'username', title: '姓名'}
                ,{field: 'sfz', title: '身份证号'}
                ,{field: 'createTime', title: '创建时间'}
                ,{field: 'iNumber', title: '两项补贴数据页'}
                ,{field: 'type', title: '接口类型', sort: true, width: 100, hide : true}
                ,{field: 'state', title: '状态', width: 135, templet :function (row){return stateDataIf(row.state); }}
                ,{field: 'remark', title: '备注', sort: true, width: 100}
            ]]
        });

        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;
                case 'sreach':
                    var map = {}; // Map map = new HashMap();
                    // if ("" != performBatch){
                    //     map["performBatch"] = performBatch; // map.put(key, value);
                    // }
                    var state = $("#state").val();
                    var startTime = $("#start").val();
                    var endTime = $("#end").val();
                    if ("" !=  startTime){
                        map["startTime"] = startTime;
                    }
                    if ("" !=  endTime){
                        map["endTime"] = endTime;
                    }
                    map["state"] = state;
                    table.reload('test',{
                        where: map
                        ,page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    });
                    if ("" != state){
                        $("#state").val(state);
                    }
                    if ("" != startTime){
                        $("#start").val(startTime);
                    }
                    if ("" != endTime){
                        $("#end").val(endTime);
                    }
                    //执行一个laydate实例
                    laydate.render({
                        elem: '#start' //指定元素
                    });

                    //执行一个laydate实例
                    laydate.render({
                        elem: '#end' //指定元素
                    });
                    break;
                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };

        });

    });



</script>

</html>